<template>
  <div>
    <el-table :data="groupList" style="width:100%;" :height="height" size="mini">
        <el-table-column label="分组名称" min-width="180">
            <template slot-scope="scope">
                <div class="table-block">
                    <span>{{scope.row.keyName}}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="editGroup(scope.$index,scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteGroup(scope.$index,scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'propertyGroup',
  data(){
    return {
        editing:null,
        deleting:null,
        height:0
    };
  },
  methods:{
    deleteGroup:function(index,row){
      this.$confirm('此操作将永久删除该属性分组, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(
        () => {
          this.deleting=index;
          var params=new URLSearchParams();
          params.append('keyId',row.keyId);
          this.$http.post(this.$store.state.url+'/property/delete',params).then(
            response=>{
              if(response.data.status==200){
                this.groupList.splice(this.deleting,1);
                this.$message({message: '删除成功',type: 'success'});
              }else{
                this.$message.error('删除失败');
              }
            }
          ).catch(
            error=>{
              this.$message.error('删除失败');
            }
          );
        }
      ).catch(
        ()=>{
          this.$message({type: 'info',message: '已取消删除'});
        }
      );
    },
    editGroup(index,row){
      this.$emit("toGroupEditor",index,row);
    }
  },
  created:function(){
    this.height=window.innerHeight-300;
  },
  props:['groupList']
}

</script>

<style scoped>
.table-block{
  width:100%;
  height:100%
}
</style>
